<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pa="http://primefaces.org/apollo">
<!--    <h:form>
        <pa:menu>
            <p:submenu label="#{msgs['menu.layout_features']}" icon="fa fa-paint-brush">
                <p:menuitem value="#{msgs['menu.promotion_page']}" icon="fa fa-laptop" outcome="/promotion-page.xhtml"/>
                <p:menuitem value="#{msgs['menu.green']}" icon="fa fa-paint-brush green" actionListener="#{themeView.setTheme('apollo')}" immediate="true" ajax="false"/>
                <p:menuitem value="#{msgs['menu.blue']}" icon="fa fa-paint-brush blue" actionListener="#{themeView.setTheme('apollo-blue')}" immediate="true" ajax="false"/>
                <p:menuitem value="#{msgs['menu.orange']}" icon="fa fa-paint-brush orange" actionListener="#{themeView.setTheme('apollo-orange')}" immediate="true" ajax="false"/>
                <p:menuitem value="#{msgs['menu.red']}" icon="fa fa-paint-brush red" actionListener="#{themeView.setTheme('apollo-red')}" immediate="true" ajax="false"/>
            </p:submenu>

            <p:separator/>

            <p:submenu label="#{msgs['menu.apollo_theme']}" icon="fa fa-rocket">
                <p:menuitem value="#{msgs['menu.sample']}" outcome="/sample.xhtml" icon="fa fa-columns" />
                <p:menuitem value="#{msgs['menu.forms']}" outcome="/forms.xhtml" icon="fa fa-file-text-o" />
                <p:menuitem value="#{msgs['menu.data_components']}" outcome="/data.xhtml" icon="fa fa-calendar-o" />
                <p:menuitem value="#{msgs['menu.datatable']}" outcome="/datatable.xhtml" icon="fa fa-list-alt" />
                <p:menuitem value="#{msgs['menu.panels']}" outcome="/panel.xhtml" icon="fa fa-columns" />
                <p:menuitem value="#{msgs['menu.overlays']}" outcome="/overlay.xhtml" icon="fa fa-image" />
                <p:menuitem value="#{msgs['menu.menus']}" outcome="/menu.xhtml" icon="fa fa-align-justify" />
                <p:menuitem value="#{msgs['menu.messages']}" outcome="/messages.xhtml" icon="fa fa-comments-o" />
                <p:menuitem value="#{msgs['menu.charts']}" outcome="/charts.xhtml" icon="fa fa-bar-chart" />
                <p:menuitem value="#{msgs['menu.fileupload']}" outcome="/file.xhtml" icon="fa fa-cloud-upload" />
                <p:menuitem value="#{msgs['menu.misc']}" outcome="/misc.xhtml" icon="fa fa-stack-overflow" />
            </p:submenu>

            <p:separator/>

            <p:submenu label="#{msgs['menu.default_pages']}" icon="fa fa-newspaper-o">
                <p:menuitem value="#{msgs['menu.empty_page']}" outcome="/empty-page.xhtml" icon="fa fa-plus-square" />
                <p:menuitem value="#{msgs['menu.login_page']}" outcome="/login.xhtml" icon="fa fa-sign-in" />
                <p:menuitem value="#{msgs['menu.error_page']}" outcome="/error.xhtml" icon="fa fa-exclamation-circle" />
                <p:menuitem value="#{msgs['menu.404_page']}" outcome="/404.xhtml" icon="fa fa-times" />
                <p:menuitem value="#{msgs['menu.access_denied_page']}" outcome="/access-denied" icon="fa fa-eye-slash" />
            </p:submenu>

            <p:separator/>

            <p:submenu label="#{msgs['menu.menu_hierarchy']}" icon="fa fa-sitemap">
                <p:submenu label="#{msgs['menu.submenu_1']}" icon="fa fa-folder">
                    <p:submenu label="#{msgs['menu.submenu_1_1']}" icon="fa fa-folder">
                        <p:submenu label="#{msgs['menu.submenu_1_1_1']}" icon="fa fa-folder">
                            <p:menuitem value="#{msgs['menu.link_1']}" url="#" />
                            <p:menuitem value="#{msgs['menu.link_2']}" url="#" />
                            <p:menuitem value="#{msgs['menu.link_3']}" url="#" />
                        </p:submenu>
                    </p:submenu>
                </p:submenu>
                <p:submenu label="#{msgs['menu.submenu_2']}" icon="fa fa-folder">
                    <p:submenu label="#{msgs['menu.submenu_2_1']}" icon="fa fa-folder">
                        <p:submenu label="#{msgs['menu.submenu_2_1_1']}" icon="fa fa-folder">
                            <p:menuitem value="#{msgs['menu.link_1']}" url="#" />
                            <p:menuitem value="#{msgs['menu.link_2']}" url="#" />
                            <p:menuitem value="#{msgs['menu.link_3']}" url="#" />
                        </p:submenu>
                    </p:submenu>
                </p:submenu>
            </p:submenu>

            <p:separator/>

            <p:submenu label="#{msgs['menu.links']}" icon="fa fa-dropbox">
                <p:menuitem value="#{msgs['menu.documentation']}" outcome="/documentation.xhtml" icon="fa fa-life-ring" />
                <p:menuitem value="#{msgs['menu.font_icons']}" outcome="/font-icons.xhtml" icon="fa fa-paint-brush" />
                <p:menuitem value="#{msgs['menu.user_profile']}" url="#" icon="fa fa-users" />
                <p:menuitem value="#{msgs['menu.tasks']}" url="#" icon="fa fa-history" />
                <p:menuitem value="#{msgs['menu.contact']}" url="#" icon="fa fa-microphone" />
            </p:submenu>

            <f:facet name="options">
                <p:commandButton icon="fa fa-search Fs18 white" styleClass="Fright" type="button"/>
                <p:inputText placeholder="#{msgs['button.search']}" styleClass="Fright"/>
            </f:facet>
        </pa:menu>
    </h:form>-->

    <div class="sidebar">
        <div class="nano">
            <div class="nano-content sidebar-scroll-content">
                <div class="logo">
                    <!--<img id="j_idt12" src="/apollo/javax.faces.resource/images/logo.png.xhtml?ln=apollo-layout" alt="" />-->
                    <p:graphicImage value="#{resource['apollo-layout:images/logo.png']}"/>
                </div>

                <div class="profile">
                    <!--<img id="j_idt14" src="/apollo/javax.faces.resource/images/profile.png.xhtml?ln=apollo-layout" alt="" />-->
                    <p:graphicImage value="#{resource['apollo-layout:images/profile.png']}"/>
                    <span class="username">Peggy Olson</span>
                </div>

                <div class="menu">
                    <ul id="j_idt16" class="menu-container">
                        <li id="om_dashboard" role="menuitem"><a href="/apollo/dashboard.xhtml"><i class="fa fa-home fa-fw"></i><span>Dashboard</span></a></li>
                        <li id="om_db_landing" role="menuitem"><a href="/apollo/landing.xhtml"><i class="fa fa-certificate fa-fw"></i><span>Landing</span></a></li>
                        <li id="om_components" role="menuitem"><a href="#"><i class="fa fa-sitemap fa-fw"></i><span>Components</span><i class="fa fa-fw fa-angle-down"></i></a>
                            <ul role="menu">
                                <li id="om_sample" role="menuitem"><a href="/apollo/sample.xhtml"><i class="fa fa-columns fa-fw"></i><span>Sample Page</span></a></li>
                                <li id="om_forms" role="menuitem"><a href="/apollo/forms.xhtml"><i class="fa fa-code fa-fw"></i><span>Forms</span></a></li>
                                <li id="om_data" role="menuitem"><a href="/apollo/data.xhtml"><i class="fa fa-table fa-fw"></i><span>Data</span></a></li>
                                <li id="om_panels" role="menuitem"><a href="/apollo/panel.xhtml"><i class="fa fa-list-alt fa-fw"></i><span>Panels</span></a></li>
                                <li id="om_overlays" role="menuitem"><a href="/apollo/overlay.xhtml"><i class="fa fa-square fa-fw"></i><span>Overlays</span></a></li>
                                <li id="om_menus" role="menuitem"><a href="/apollo/menu.xhtml"><i class="fa fa-minus-square-o fa-fw"></i><span>Menus</span></a></li>
                                <li id="om_messages" role="menuitem"><a href="/apollo/messages.xhtml"><i class="fa fa-circle-o-notch fa-fw"></i><span>Messages</span></a></li>
                                <li id="om_charts" role="menuitem"><a href="/apollo/charts.xhtml"><i class="fa fa-area-chart fa-fw"></i><span>Charts</span></a></li>
                                <li id="om_file" role="menuitem"><a href="/apollo/file.xhtml"><i class="fa fa-arrow-circle-o-up fa-fw"></i><span>File</span></a></li>
                                <li id="om_misc" role="menuitem"><a href="/apollo/misc.xhtml"><i class="fa fa-user-secret fa-fw"></i><span>Misc</span></a></li>
                            </ul>
                        </li>
                        <li id="om_default" role="menuitem"><a href="#"><i class="fa fa-life-saver fa-fw"></i><span>Template Pages</span><i class="fa fa-fw fa-angle-down"></i></a>
                            <ul role="menu">
                                <li id="om_empty" role="menuitem"><a href="/apollo/empty.xhtml"><i class="fa fa-square-o fa-fw"></i><span>Empty Page</span></a></li>
                                <li id="om_login" role="menuitem"><a href="/apollo/login.xhtml"><i class="fa fa-sign-in fa-fw"></i><span>Login Page</span></a></li>
                                <li id="om_error" role="menuitem"><a href="/apollo/error.xhtml"><i class="fa fa-exclamation-circle fa-fw"></i><span>Error Page</span></a></li>
                                <li id="om_404" role="menuitem"><a href="/apollo/404.xhtml"><i class="fa fa-times fa-fw"></i><span>404 Page</span></a></li>
                                <li id="om_access" role="menuitem"><a href="/apollo/access.xhtml"><i class="fa fa-exclamation-triangle fa-fw"></i><span>Access Denied Page</span></a></li>
                            </ul>
                        </li>
                        <li id="om_hierarchy" role="menuitem"><a href="#"><i class="fa fa-gg fa-fw"></i><span>Menu Hierarchy</span><i class="fa fa-fw fa-angle-down"></i></a>
                            <ul role="menu">
                                <li id="om_sm1" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Submenu 1</span><i class="fa fa-fw fa-angle-down"></i></a>
                                    <ul role="menu">
                                        <li id="om_sm11" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Submenu 1.1</span><i class="fa fa-fw fa-angle-down"></i></a>
                                            <ul role="menu">
                                                <li id="om_lnk111" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Link 1.1.1</span></a></li>
                                                <li id="om_lnk112" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Link 1.1.2</span></a></li>
                                                <li id="om_lnk113" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Link 1.1.3</span></a></li>
                                            </ul>
                                        </li>
                                        <li id="om_sm12" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Submenu 1.2</span><i class="fa fa-fw fa-angle-down"></i></a>
                                            <ul role="menu">
                                                <li id="om_lnk121" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Link 1.2.1</span></a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li id="om_sm2" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Submenu 2</span><i class="fa fa-fw fa-angle-down"></i></a>
                                    <ul role="menu">
                                        <li id="om_sm21" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Submenu 2.1</span><i class="fa fa-fw fa-angle-down"></i></a>
                                            <ul role="menu">
                                                <li id="om_lnk211" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Link 2.1.1</span></a></li>
                                                <li id="om_lnk212" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Link 2.1.2</span></a></li>
                                            </ul>
                                        </li>
                                        <li id="om_sm22" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Submenu 2.2</span><i class="fa fa-fw fa-angle-down"></i></a>
                                            <ul role="menu">
                                                <li id="om_lnk221" role="menuitem"><a href="#"><i class="fa fa-sign-in fa-fw"></i><span>Link 2.2.1</span></a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li id="om_doc" role="menuitem"><a href="/apollo/docs.xhtml"><i class="fa fa-book fa-fw"></i><span>Documentation</span></a></li>
                    </ul>
                    <script id="j_idt16_s" type="text/javascript">PrimeFaces.cw("Apollo","widget_j_idt16",{id:"j_idt16"});</script>
                </div>
            </div>
        </div>
    </div>
</ui:composition>
